<!DOCTYPE html>
<link rel="match" href="../expected/position-sticky-right-ref.html" />
<style>
    * {
        scrollbar-width: none;
    }

    .scroll-container {
        width: 500px;
        overflow-x: scroll;
        white-space: nowrap;
        background-color: #f0f0f0;
        display: grid;
        grid-template-columns: 1000px 300px 1000px;
        border: 5px solid yellowgreen;
    }

    .section {
        height: 200px;
        background-color: orangered;
    }

    .sticky-element {
        position: sticky;
        right: 0;
        background-color: blueviolet;
        height: 200px;
        line-height: 200px;
        color: white;
    }
</style>
<div class="scroll-container" id="a">
    <div class="section"></div>
    <div class="sticky-element"></div>
    <div class="section"></div>
</div>
<div class="scroll-container" id="b">
    <div class="section"></div>
    <div class="sticky-element"></div>
    <div class="section"></div>
</div>
<div class="scroll-container" id="c">
    <div class="section"></div>
    <div class="sticky-element"></div>
    <div class="section"></div>
</div>
<script>
    const a = document.getElementById("a");
    a.scrollLeft = 0;

    const b = document.getElementById("b");
    b.scrollLeft = 900;

    const c = document.getElementById("c");
    c.scrollLeft = 1400;
</script>
